React |
您所在的位置：网站首页 › react router v6 中文文档 › React |
|
一、基本用法 React-Router的安装方法： npm： $ npm install react-router-dom@6 yarn$ yarn add react-router-dom@6 目前官方从5开始已经放弃原有的react-router库，统一命名为react-router-dom复制代码使用方法 React-Router本身在React开发中就是一个组件，因此在使用时基本遵循组件开发相关原则。这里采用create-react-app来创建一个基础的demo工程演示使用过程。复制代码创建demo create-react-app my-first-react 安装react-router组件启用全局路由模式 全局路由有常用两种路由模式可选：HashRouter 和 BrowserRouter HashRouter：URL中采用的是hash(#)部分去创建路由，类似 www.example.com/#/BrowserRouter：URL采用真实的URL资源 后续有文章会详细讲HashRouter的原理和实现，这里我们采用BrowserRouter来创建路由 index.js import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root')); reportWebVitals();复制代码 这样我们在yarn start 或者 npm run start的时候访问/就可以访问这个组件了，具体效果大家可以自行运行路由功能 React-Router V6版本常用路由组件和hooks，其他不常用的大家可以看下官网的介绍 组件名作用说明一组路由代替原有，所有子路由都用基础的Router children来表示基础路由Router是可以嵌套的，解决原有V5中严格模式，后面与V5区别会详细介绍导航组件在实际页面中跳转使用自适应渲染组件根据实际路由url自动选择组件 hooks名作用说明useParams返回当前参数根据路径读取参数useNavigate返回当前路由代替原有V5中的 useHistoryuseOutlet返回根据路由生成的elementuseLocation返回当前的location 对象useRoutes同Routers组件一样，只不过是在js中使用useSearchParams用来匹配URL中?后面的搜索参数基础使用示例 App.js 这里创建了两个组件Home和About，然后分别注册/和about，在每个页面还有Link来进行导航复制代码 import './App.css';import { Routes, Route, Link } from "react-router-dom"function App() { return ( );}function Home() { return Welcome to the homepage about }function About() { return Welcome to the about page home about }export default App; 复制代码 运行后至此，一个最简单的路由demo就正常运行了。 嵌套路由 嵌套路由是V6版本对之前版本一个较大的升级，采用嵌套路由会智能的识别 function App() { return ( );}复制代码 当访问 /user/123 的时候，组件树将会变成这样 复制代码 当访问/user/create的时候，组件树将变成这样 复制代码 如果只是内部组件修改，也可以采用来直接实现，如下所示 function App() { return ( );}function Users() { return ( Users );}复制代码index路由 index属性解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候，可以增加index属性来指定默认路由 function App() { return ( );}复制代码 这样当访问/的时候会默认渲染About组件路由通配符 整个react-router支持以下几种通配符复制代码 /groups/groups/admin/users/:id/users/:id/messages/files/*/files/:id/*复制代码 注意，以下这些正则方式在V6里面是不支持的 /users/:id?/tweets/:id(\d+)/files/*/cat.jpg/files-*复制代码 这里的*只能用在/后面，不能用在实际路径中间 关于NotFound类路由，可以用*来代替 function App() { return ( );}复制代码获取参数 useParams 和useSearchParams 假设现有App路由 function App() { return ( );}复制代码 那么在UserDetail内部需要用useParams来获取对应的参数 import { useParams } from "react-router-dom"; export default function UserDetail() { let params = useParams(); return User: {params.id};}复制代码 useSearchParams相对复杂，他返回的是一个当前值和set方法 let [searchParams, setSearchParams] = useSearchParams(); 使用时可以用searchParams.get("id")来获取参数，同时页面内也可以setSearchParams({"id":2})来改变路由，这样当访问 http://URL/user?id=111时就可以获取和设置路径useNavigate useNavigate是替代原有V5中的useHistory的新hooks，前端培训其用法和useHistory类似，整体使用起来更轻量，他的声明方式如下： declare function useNavigate(): NavigateFunction; interface NavigateFunction { ( to: To, options?: { replace?: boolean; state?: State } ): void; (delta: number): void;}复制代码 //js写法 let navigate = useNavigate(); function handleClick() { navigate("/home"); } //组件写法 function App() { return ; } //替代原有的go goBack和goForward navigate(-2)}> Go 2 pages back navigate(-1)}>Go back navigate(1)}> Go forward navigate(2)}> Go 2 pages forward 复制代码二、与V5的区别1.用 children形式替代 V5写法： function App() { return ( ); }复制代码V6写法 function App() { return ( ); }复制代码2.去除Switch中的，用react-router-dom中的Redirect 替代，或者用 实现 V5写法： 复制代码V6写法： }复制代码3.支持相对位置 V5版本的to属性只支持绝对位置，如表示，如果当时正在Users组件内,想跳转需要。在V6中，Link默认支持相对位置，也就是 在Users组件内会等价于，同时支持'..' 和'.'等相对路径写法。 // If your routes look like this // and the current URL is /app/dashboard (with or without// a trailing slash) => => => => 复制代码4.使用useNavigate代替useHistory |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |